<template>
  <!-- 出库单 -->
  <view class="outboundOrde">
    <view class="top">
      <van-cell-group>
        <van-field
          :value="outboundInfo.outbound_sn"
          label="出库单号："
          readonly
        ></van-field>
        <view v-if="toggle">
          <van-field
            :value="outboundInfo.expect_time"
            label="出库日期:"
            readonly
          ></van-field>
          <van-field
            :value="outboundInfo.applyname"
            label="领料人："
            readonly
          ></van-field>
          <van-field
            :value="outboundInfo.outbound_name"
            label="保管员:"
            readonly
          ></van-field>
          <van-field
            :value="outboundInfo.principal_signature"
            label="食堂负责人："
            readonly
          ></van-field>
        </view>
      </van-cell-group>
      <view class="pack-up flexc f28" @click="toggleCollapse">
        <text>{{ toggle ? "收起" : "展开" }}</text>
        <van-icon :name="toggle ? 'arrow-up' : 'arrow-down'" />
      </view>
    </view>
    <view class="content" v-if="outbound_type == '0'">
      <view class="title flexb">
        <view class="title_left f26">
          共<text>{{ purchasegoodsinfo.length }}</text>件商品
        </view>
        <view class="title_right flexb f26">
          <view>总计：
            <text>￥{{ purchasegoodsinfo.reduce((prev, item) => prev * 1 + item.total_money * 1, 0) | number_format(2)}}</text></view>
        </view>
        <view class="material-ratio" @click="goMaterials">查看材料配比</view>
      </view>
      <view class="list_box">
        <view class="list_item f28" v-for="(item, index) in purchasegoodsinfo" :key="index">
          <view class="list_item_title flexb">
            <view class="name flexAI f28 fwbold">
              <view class="point br50 mr10"></view>
              <view>品名：{{ item.goods_name }}</view>
            </view>
            <view> 数量：{{ item.goods_num }}{{ item.unit_name }} </view>
          </view>
          <view class="type"> 使用类型：{{ item.use_type_name }} </view>
          <view class="details-subtotal flexb">
            <view class="details f28" @click="details(item)"> 详情 </view>
            <view class="subtotal f28 fwbold"> 小计：￥{{ item.total_money }} </view>
          </view>
        </view>
      </view>
    </view>
    <view class="content " v-else>
      <view class="title flexb">
        <view class="title_left f26">
          共<text>{{ purchasegoodsinfo.length }}</text>件商品
        </view>
        <view class="title_right flexb f26">
          <view>总计：<text>
            ￥{{ purchasegoodsinfo.reduce(  (prev, item) => prev * 1 + item.total_money * 1, 0 ) | number_format(2)}}</text ></view>
        </view>
      </view>
      <view class="list_box">
        <view class="list_item f28" v-for="(item, index) in purchasegoodsinfo" :key="index">
          <view class="list_item_title flexb">
            <view class="name flexAI f28 fwbold">
              <view class="point br50 mr10"></view>
              <view>品名：{{ item.goods_name }}</view>
            </view>
            <view> 数量：{{ item.goods_num }} </view>
          </view>
          <view class="type"> 使用类型：{{ item.use_type_name }} </view>
          <view class="time flexb">
            <view> 生产日期：{{ item.productiontime }} </view>
            <view> 保质期（天）：{{ item.assurancetime }} </view>
          </view>
          <view class="locations-price flexb">
            <view> 产地：{{ item.address }} </view>
            <view class="price">
              单价：<text>￥{{ item.goods_price }}</text>
            </view>
          </view>
          <view class="details-subtotal flexb">
            <view class="details f28" @click="details(item)"> 详情 </view>
            <view class="subtotal f28 fwbold"> 小计：￥{{ item.total_money }} </view>
          </view>
        </view>
      </view>
    </view>

    <view class="btn_style flexJC">
      <van-button type="default" @click="goBack">返回</van-button>
    </view>
    <!--详情弹框 -->
    <van-overlay :show="detailsShow" class="myover">
      <view class="wrapper flexc">
        <view class="block f28">
          <view class="title flexb f32">
            <view> 详情 </view>
            <view class="icon" @click="offShow">
              <van-icon name="clear" color="#3E3D3D" size="20px" />
            </view>
          </view>
          <view v-if="outbound_type == '0'">
            <van-cell-group>
              <van-field
                :value="detailForm.goods_name"
                label="名称："
                readonly
              ></van-field>
              <van-field
                :value="detailForm.unit_name"
                label="单位："
                readonly
              ></van-field>
              <van-field
                :value="detailForm.goods_num"
                label="数量："
                readonly
              ></van-field>
              <van-field
                :value="detailForm.nutrition_name"
                label="是否营养餐："
                readonly
              ></van-field>
              <van-field
                :value="detailForm.add_time"
                label="入库日期："
                readonly
              ></van-field>
              <van-field
                :value="detailForm.warehousing_time"
                label="出库时间："
                readonly
              ></van-field>
              <van-field
                :value="detailForm.total_money"
                label="小计："
                readonly
              ></van-field>
            </van-cell-group>
          </view>
          <view v-else>
            <van-cell-group>
              <van-field
                :value="detailForm.goods_name"
                label="名称："
                readonly
              ></van-field>
              <van-field
                :value="detailForm.unit_name"
                label="单位："
                readonly
              ></van-field>
              <van-field
                :value="detailForm.goods_price"
                label="单价"
                readonly
              ></van-field>
              <van-field
                :value="detailForm.goods_num"
                label="数量："
                readonly
              ></van-field>
              <van-field
                :value="detailForm.address"
                label="产地："
                readonly
              ></van-field>
              <van-field
                :value="detailForm.assurancetime"
                title-width="100"
                label="保质期（天）："
                readonly
              ></van-field>
              <van-field
                :value="detailForm.productiontime"
                label="生产日期："
                readonly
              ></van-field>
              <van-field
                :value="detailForm.add_time"
                label="入库日期："
                readonly
              ></van-field>
              <van-field
                :value="detailForm.nutrition_name"
                label="是否营养餐："
                readonly
              ></van-field>
              <van-field
                v-model="detailForm.use_type_name"
                label="使用类型："
                readonly
              ></van-field>
              <van-field
                :value="detailForm.total_money"
                label="小计："
                readonly
              ></van-field>
            </van-cell-group>
          </view>
        </view>
      </view>
    </van-overlay>
    <!-- 查看原材料 -->
    <van-overlay :show="materialsShow">
      <view class="wrapper flexc">
        <view class="block f28">
          <scroll-view scroll-y="true" style="height: 900rpx">
            <view class="title flexb f32">
              <view class="title-left">材料配比</view>
              <view>
                <view class="icon" @click="offShow">
                  <van-icon name="clear" color="#3E3D3D" size="20px" />
                </view>
              </view>
            </view>
            <view class="table">
              <view class="row disFlex back-color">
                <view class="item-style flexc">菜名</view>
                <view class="item-style flexc">品名</view>
                <view class="item-style flexc">数量</view>
                <view class="item-style flexc">单位</view>
              </view>
              <view class="row disFlex" v-for="(item, index) in menu_stock_detail" :key="index" >
                <view class="item-style flexc">{{ item.goods_name }}</view>
                <view class="item-style flexc">{{ item.foods_name }}</view>
                <view class="item-style flexc">{{ item.goods_num }}</view>
                <view class="item-style flexc">{{ item.unit_name }}</view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </van-overlay>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detailsShow: false,
      outbound_sn: "",
      outboundInfo: {},
      purchasegoodsinfo: [],
      menu_stock_detail: [], //材料配比
      toggle: false,
      outbound_type: "",
      detailForm: {
        outbound_type: "",
      },
      materialsShow: false,
    };
  },

  // 监听页面加载，该钩子被调用时
  onLoad(options) {
    this.outbound_sn = options.outbound_sn;
    if (this.outbound_sn) {
      this.getDeliveryorder();
    }
  },
  methods: {
    /*详情*/ 
    details(item) {
      this.detailForm = item;
      this.detailForm.outbound_type = item.outbound_type;
      this.detailsShow = true;
    },

    /*关闭*/ 
    offShow() {
      this.detailsShow = false;
      this.materialsShow = false; //材料配比弹框状态
    },
    /*返回*/ 
    goBack() {
      uni.navigateBack({
        delta: 1, //返回上一级页面
      });
    },
    /*展开收起*/
    toggleCollapse() {
      this.toggle = !this.toggle;
    },
    /*获取页面数据*/
    async getDeliveryorder() {
      let res = await this.$ajax.outDeliveryorder({
        outbound_sn: this.outbound_sn,
      });
      if (res.code == 1) {
        this.outboundInfo = res.data.outboundInfo;
        this.outbound_type = res.data.outboundInfo.outbound_type; //类型
        this.purchasegoodsinfo = res.data.purchasegoodsinfo;
        this.menu_stock_detail = res.data.menu_stock_detail; //材料配比
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    },
    /*查看材料配比*/
    goMaterials() {
      this.materialsShow = true;
    },
  },

  mounted() {},

  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    uni.setNavigationBarTitle({
      title: "出库单",
    });
  },

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>

<style lang="scss" >
// 材料配比
.material-ratio {
  font-size: 24rpx;
  border: 1px solid;
  color: white;
  background: #2e88ee;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rpx 10rpx;
  margin-left: 10rpx;
}
.outboundOrde {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: rgba(244, 244, 244, 1);
  padding-bottom: 50rpx;

  .top {
    background: rgba(255, 255, 255, 1);

    .pack-up {
      padding: 20rpx 0rpx;
      color: rgba(46, 136, 238, 1);
      font-family: SourceHanSansSC-regular;
    }
  }

  .content {
    .title {
      padding: 20rpx 30rpx;

      .title_left {
        color: rgba(153, 153, 153, 1);
        font-family: SourceHanSansSC-regular;

        text {
          color: red;
        }
      }

      .title_right {
        color: rgba(153, 153, 153, 1);
        font-family: SourceHanSansSC-regular;

        text {
          color: red;
          font-weight: bold;
        }
      }
    }

    .list_box {
      .list_item {
        width: 100%;
        line-height: 55rpx;
        background: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        padding: 20rpx 20rpx;
        font-family: SourceHanSansSC-regular;
        margin-bottom: 20rpx !important;

        .list_item_title {

          .name {
            color: rgba(16, 16, 16, 1);
            font-family: SourceHanSansSC-bold;

            .point {
              width: 15rpx;
              height: 15rpx;
              background: rgba(98, 177, 88, 1);
            }
          }
        }

        .type {
          text {
            color: red;
          }
        }

        .time {
        }

        .locations-price {
          padding-bottom: 10rpx;
          border-bottom: 0.5rpx solid #e7e4e4;

          .price {
            text {
              color: red;
            }
          }
        }

        .details-subtotal {

          .details {
            color: rgba(46, 136, 238, 1);
            font-family: SourceHanSansSC-regular;
          }

          .subtotal {
            color: rgba(209, 35, 18, 1);
            font-family: SourceHanSansSC-bold;
            font-weight: bold;
          }
        }
      }
    }
 
    .btn_style {
      margin-top: 52rpx;

      .van-button {
        width: 180rpx;
        height: 72rpx;
        border-radius: 66rpx;
        border: 0.5rpx solid rgba(187, 187, 187, 1);
        color: rgba(102, 102, 102, 1);
        font-family: Microsoft Yahei;
      }
    }
  }

  .btn_style {
    display: flex;
    justify-content: center;
    margin-top: 52rpx;

    .van-button {
      width: 180rpx;
      height: 72rpx;
      border-radius: 66rpx;
      border: 0.5rpx solid rgba(187, 187, 187, 1);
      color: rgba(102, 102, 102, 1);
      font-family: Microsoft Yahei;
    }
  }
}

// 弹框样式
.myover {
  z-index: 100 !important;

  .van-transition {
    z-index: 100 !important;
  }
}

.wrapper {
  height: 100%;

  .block {
    z-index: 99;
    width: 100%;
    background-color: #fff;
    margin: 0 30rpx;
    border-radius: 16px;
    padding: 40rpx 20rpx;

    .title {
      color: rgba(16, 16, 16, 1);
      font-family: SourceHanSansSC-bold;
      padding-bottom: 10rpx;
    }
    .table {
      width: 100%;
      .item-style {
        width: 25%;
        padding: 10px;
        word-break: break-all;
        border-right: 1px solid #ccc;
      }
      .row {
        border: 1px solid #ccc;
      }
      .back-color {
        background: #cdcccc;
      }
    }
  }
}
</style>